﻿@{
    ViewBag.Title = "CreateTask";
}
<link href="@Url.Content("/Scripts/tiny_mce/themes/advanced/skins/default/ui.css")" rel="Stylesheet"
    type="text/css" />
<link href="@Url.Content("/Scripts/tiny_mce/plugins/inlinepopups/skins/clearlooks2/window.css")" rel="Stylesheet"
    type="text/css" />
<link href="@Url.Content("/Content/tabify.css")" rel="Stylesheet"
    type="text/css" />
<script type="text/javascript" src="@Url.Content("/Scripts/tiny_mce/jquery.tinymce.js")"></script>
<script type="text/javascript" src="@Url.Content("/Scripts/loadTinyMce.js")"></script>
<script type="text/javascript" src="@Url.Content("/Scripts/jquery.tabify.js")"></script>
<script type="text/javascript">
    $(function () {

        loadTinyMce();
        $("#tabs").idTabs();
    });
</script>
<div class="line">
    <div class="float-left">
        Tilte:
    </div>
    <div class="float-left fulfill">
        <input id="txtTitle" data-bind="value: title" type="text" />
    </div>
</div>
<div class="line">
    <div class="float-left">
        Iteration:
    </div>
    <div class="float-left fulfill">
        <select data-bind="options: iterationList, optionsValue: 'Id', optionsText: 'Name', value: iterationSelected"></select>
    </div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
<fieldset class="float-left">
    <legend>Status</legend>
    <div class="line">
        <div class="float-left">
            Assigned To:
        </div>
        <div class="float-left">
            <select data-bind="options: assignedList, optionsValue: 'UserId', optionsText: 'UserName', value: assignedSelected">
            </select>
        </div>
    </div>
    <div class="line">
        <div class="float-left">
            State:
        </div>
        <div class="float-left">
            <select data-bind="options: stateList, optionsValue: 'Id', optionsText: 'Name', value: stateSelected">
            </select>
        </div>
    </div>
    <div class="line">
        <div class="float-left">
            Blocked:
        </div>
        <div class="float-left">
            <select data-bind="options: blockList, optionsValue: 'Id', optionsText: 'Name', value: blockSelected"></select>
        </div>
    </div>
</fieldset>
<fieldset class="float-left">
    <legend>Detail</legend>
    <div class="line">
        <div class="float-left">
            Remaining Work:
        </div>
        <div class="float-left">
            <input data-bind="value: remainingWork" type="text" />
        </div>
    </div>
    <div class="line">
        <div class="float-left">
            Priority:
        </div>
        <div class="float-left">
            <input data-bind="value: priority" type="text" />
        </div>
    </div>
    <div class="line">
        <div class="float-left">
            Activity:
        </div>
        <div class="float-left">
            <select data-bind="options: activityList, optionsValue: 'Id', optionsText: 'Name'"></select>
        </div>
    </div>
    <div class="line">
        <div class="float-left">
            Area:
        </div>
        <div class="float-left">
            <select data-bind="options: areaList, optionsValue: 'Id', optionsText: 'NameArea', value: areaSelected"></select>
        </div>
    </div>
</fieldset>
<div>
    <button data-bind="click: save">Save</button>
</div>
<div class="clear">
</div>
<div id="tabs" class="usual">
    <ul>
        <li><a href="#tabs-1">Description</a></li>
        <li><a href="#tabs-2">Details</a></li>
        <li><a href="#tabs-3">Critical</a></li>
    </ul>
    <div id="tabs-1">
        <textarea id="txtaDescription" style="height: 500px" class="tinymce" data-bind="value: description"></textarea>
    </div>
    <div id="tabs-2">
        <input />
    </div>
    <div id="tabs-3">
        <input value="aaa" />
    </div>
</div>
<div>
</div>
